import React, { useEffect, useState } from "react";
import { Button, Card, Form, Input, message } from "antd";
import { useNavigate, useParams } from "react-router-dom";
import { ReqAddHospitalParams } from "@/api/hospital/model/hospitalSetTypes";
import {
  reqAddHospital,
  reqGetHospital,
  reqUpdateHospital,
} from "@/api/hospital/hospitalSet";

export default function AddOrUpdateHospital() {
  // 创建编程时导航对象
  let navigate = useNavigate();
  // 创建 loading  状态表示
  let [loading, setLoading] = useState(false);

  // 创建form 对象
  let [form] = Form.useForm();

  // 获取id 参数
  const { id } = useParams();

  useEffect(() => {
    async function getHospital() {
      if (id) {
        // + 会做转换
        const hospital = await reqGetHospital(+id);

        form.setFieldsValue(hospital);
      }
    }
    getHospital();
  }, []);

  // 表单验证成功后  添加数据
  const onFinish = async (values: ReqAddHospitalParams) => {
    try {
      // 展示菊花图
      setLoading(true);
      if (id) {
        // 修改
        await reqUpdateHospital({ ...values, id: +id });
      } else {
        //添加
        await reqAddHospital(values);
      }

      // 隐藏菊花图
      setLoading(false);
      // 提示添加成功
      message.success(`${id ? "修改" : "添加"} 医院成功！`);
      // 成功后跳转到医院管理页
      navigate("/syt/hospital/hospitalSet", { replace: true });
    } catch (err) {
      setLoading(false);
      console.log(err);
    }
  };
  return (
    <Card loading={loading}>
      <Form
        form={form}
        onFinish={onFinish}
        className="mt"
        name="basic"
        labelCol={{ span: 3 }}
        wrapperCol={{ span: 18 }}
        autoComplete="off"
      >
        <Form.Item
          label="医院名称"
          name="hosname"
          rules={[{ required: true, message: "请输入医院名称!" }]}
        >
          <Input />
        </Form.Item>

        <Form.Item
          label="医院编号"
          name="hoscode"
          rules={[{ required: true, message: "请输入医院编号!" }]}
        >
          <Input />
        </Form.Item>

        <Form.Item
          label="api基础路径"
          name="apiUrl"
          rules={[{ required: true, message: "请输入api基础路径!" }]}
        >
          <Input />
        </Form.Item>

        <Form.Item
          label=" 联系人姓名"
          name="contactsName"
          rules={[{ required: true, message: "联系人姓名不能为空!" }]}
        >
          <Input />
        </Form.Item>

        <Form.Item
          label="联系人手机"
          name="contactsPhone"
          rules={[
            { required: true, message: "联系人电话不能为空!" },
            { pattern: /^1[3-9][0-9]{9}$/, message: "请输入合法的手机号" },
          ]}
        >
          <Input />
        </Form.Item>

        <Form.Item wrapperCol={{ offset: 3, span: 16 }}>
          <Button type="primary" htmlType="submit">
            保存
          </Button>
          <Button
            type="default"
            onClick={() => {
              navigate("/syt/hospital/hospitalSet");
            }}
          >
            返回
          </Button>
        </Form.Item>
      </Form>
    </Card>
  );
}
